<template>
  <div class="box" style="height:100%;">
    <div class="tabsContainer" style="height:90%;">
      <el-tabs style="padding: 0rem 0rem 0rem;height:100%;">
        <el-tab-pane label="质量参数">
          <div style="margin-top: 2rem">
            <span style="margin-right: 1rem;font-size:18px;">视频质量:</span>
            <el-select
              style="width: 15rem; height: 80px;"
              v-model="vedioProfile"
              filterable
              placeholder="请选择视频质量"
            >
              <el-option
                style="width: 15rem; height: 2.2rem"
                v-for="(item, index) in vedioProfileList"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>

          <el-button
            style="margin-right: 1rem"
            type=""
            round
            @click="resetVedioProfile"
            >重置</el-button
          >
          <el-button
            style="margin-left: 1rem"
            type="success"
            round
            @click="changeVedioProfile"
            >确认</el-button
          >
        </el-tab-pane>

        <el-tab-pane label="噪音配置">
          <div style="margin-top: 2rem">
            <span style="margin-right: 1rem;font-size:18px;">声音质量:</span>
            <el-select
              style="width: 15rem; height: 80px"
              v-model="audioProfile"
              filterable
              placeholder="请选择声音质量"
            >
              <el-option
                style="width: 15rem; height: 2.2rem"
                v-for="(item, index) in audioProfileList"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
          <el-button
            style="margin-right: 1rem"
            type=""
            round
            @click="resetAudioProfile"
            >重置</el-button
          >
          <el-button
            style="margin-left: 1rem"
            type="success"
            round
            @click="changeAudioProfile"
            >确认</el-button
          >
        </el-tab-pane>

        <el-tab-pane label="外设配置" style="height:100%;">
          <iframe
            :src="src"
            frameborder="0"
            style="width: 100%; height: 100%;font-size:20px;"
          ></iframe>
        </el-tab-pane>

        <el-tab-pane label="编码质量">
          <div style="margin-top: 2rem">
            <span style="margin-right: 1rem;font-size:18px;">编码质量:</span>
            <el-select
              style="width: 15rem; height: 80px"
              v-model="HintProfile"
              filterable
              placeholder="请选择视频编码质量"
            >
              <el-option
                style="width: 15rem; height: 2.2rem"
                v-for="(item, index) in HintProfileList"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>

          <el-button
            style="margin-right: 1rem"
            type=""
            round
            @click="resetHintProfile"
            >重置</el-button
          >
          <el-button
            style="margin-left: 1rem"
            type="success"
            round
            @click="changeHintProfile"
            >确认</el-button
          >
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
  
<script>
import { mapMutations, mapState } from "vuex";
import { setVideoParams } from "../../../api/index.js";
export default {
  name: "Quality",
  data() {
    return {
      src: "",
      showSessionId: "",
      vedioProfile: "",
      audioProfile: "",
      audioProfileList: ["standard", "high"], //音频质量列表
      vedioProfileList: [
        "4K",
        "1440p",
        "1080p",
        "720p",
        "480p",
        "360p",
        "240p",
        "180p",
        "120p",
      ],
      HintProfile: "", //视频编码质量
      HintProfileList: ["default", "motion", "detail", "text"], //音频质量列表
    };
  },
  created() {
    this.vedioProfile = this.profile;
    this.audioProfile = this.audioprofile;
    this.HintProfile = this.hintprofile;
  },
  computed: {
    ...mapState({
      hintprofile: (state) => state.hintprofile, //视频编码质量配置
      profile: (state) => state.profile,
      audioprofile: (state) => state.audioprofile,
      currentUserId: (state) => state.currentUserId, //当前的用户id
    }),
  },
  mounted() {
    this.showSessionId = window.location.search;
    console.log(
      "*************************window.location.search***************************",
      window.location.search
    );
    this.src = `/deviceTest/aaa.html${this.showSessionId}`;
  },
  methods: {
    ...mapMutations([
      "setcurrentUserId",
      "setUserInfoDetails",
      "setprofile",
      "setaudioprofile",
      "setHintProfile",
    ]),
    logout() {
      this.$router.push("/");
    },
    changeHintProfile() {
      if (this.HintProfile) {
        let HintProfile = this.HintProfile;
        let data = {
          id: 0,
          userID: this.currentUserId,
          video_quanlity: this.profile,
          noise_quanlity: this.audioprofile,
          coding_quanlity: HintProfile,
          lastUpdate: new Date(),
        };
        //存储到缓存中
        localStorage.setItem("coding_quanlity", HintProfile);
        setVideoParams(data).then((res) => {
          console.log("设置编码成功", res);
        });
        this.setHintProfile(HintProfile);
        this.$message({
          message: "编码质量设置成功",
          type: "success",
        });
      } else {
        alert("请选择参数");
      }
    },
    changeVedioProfile() {
      if (this.vedioProfile) {
        let vedioProfile = this.vedioProfile;
        let data = {
          id: 0,
          userID: this.currentUserId,
          video_quanlity: vedioProfile,
          noise_quanlity: this.audioprofile,
          coding_quanlity: this.hintprofile,
          lastUpdate: new Date(),
        };
        //存储到缓存中
        localStorage.setItem("video_quanlity", vedioProfile);
        setVideoParams(data).then((res) => {
          console.log("设置视频分辨率成功", res);
        });
        this.setprofile(vedioProfile);
        this.$message({
          message: "参数设置成功",
          type: "success",
        });
      } else {
        alert("请选择参数");
      }
    },
    //重置语音参数
    resetAudioProfile() {
      this.audioProfile = "high";
    },
    resetVedioProfile() {
      this.vedioProfile = "480p";
    },
    resetHintProfile() {
      this.HintProfile = "default";
    },
    //确认切换语音参数
    changeAudioProfile() {
      if (this.audioProfile) {
        let audioProfile = this.audioProfile;
        let data = {
          id: 0,
          userID: this.currentUserId,
          video_quanlity: this.profile,
          noise_quanlity: audioProfile,
          coding_quanlity: this.hintprofile,
          lastUpdate: new Date(),
        };
        //存储到缓存中
        localStorage.setItem("noise_quanlity", audioProfile);
        setVideoParams(data).then((res) => {
          console.log("设置语音参数成功", res);
        });
        this.setaudioprofile(audioProfile);
        this.$message({
          message: "参数设置成功",
          type: "success",
        });
      } else {
        alert("请选择参数");
      }
    },
    open() {
      window.open(`/deviceTest/aaa.html`);
    },
  },
};
</script>

<style scoped>
/* .tabsContainer {
  position: absolute;
  left: 2rem;
  top: 2rem;
  width: 90rem;
} */
.tabsContainer .el-tabs /deep/ .el-tab-pane {
  height:100%;
}
</style>
  